<template>
  <view class="container">
    <view class="regular">
      <view class="regular_list">
        <view class="regular_list_title">城市区县</view>
        <view class="regular_list_type">*</view>
        <view class="regular_list_info">{{ partinfo.cityCounty }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">水库名称</view>
        <view class="regular_list_type">*</view>
        <view class="regular_list_info">{{ partinfo.reservoirName }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">开始时间</view>
        <view class="regular_list_type">*</view>
        <view class="regular_list_info">{{ partinfo.patrolStartTime }}</view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">水库水位</view>
        <view class="regular_list_type">*</view>
        <view class="regular_list_info">
          <view class="regular_list_infobox">
              <uni-easyinput v-model="waterValue" :inputBorder="false" :clearable="false" :styles="styles" :placeholderStyle="placeholderStyle" type="number" placeholder="请输入水库水位"></uni-easyinput>
            <view>m</view>
          </view>
        </view>
      </view>
      <view class="regular_list">
        <view class="regular_list_title">天气情况</view>
        <view class="regular_list_type">*</view>
        <view class="regular_list_info">
          <picker @change="bindPickerChange" :value="weatherIndex" :range="weatherArray">
						<view class="uni-input" :class="weatherIndex == 0 ? 'gray' : ''">{{ weather }}</view>
					</picker>
          <view v-if="weatherIndex == 0">&gt;</view>
        </view>
      </view>
    </view>
    <uni-collapse :show-animation="true" accordion v-model="accordionVal" @change="collapseChange" ref="collapse">
			<uni-collapse-item v-for="(ite, index) in blockinfo" :key="index" :title="ite.title">
				<view class="content">
          <view v-for="(item, index) in ite.list" :key="index" class="collapse_box">
            <view class="collapse_top">
              <view>{{ item.buildingsExplain }}</view>
            </view>
            <view class="collapse_mid">
              <uni-data-checkbox v-model="item.whetherStatus" :localdata="normal"></uni-data-checkbox>
            </view>
            <view class="collapse_bot">
              <view class="divider">
                <view class="line"></view>
                <view class="text">描述详情</view>
                <view class="line"></view>
              </view>
              <uni-easyinput v-model="item.description" :inputBorder="false" type="textarea" autoHeight placeholder=""></uni-easyinput>
            </view>
            <view class="collapse_img">
              <uni-file-picker v-model="item.photoUrl" @select="select($event, item)" @delete="deleteimage($event, item)" :autoUpload="false" disable-preview mode="grid" file-mediatype="image" file-extname="png,jpg"></uni-file-picker>
            </view>
          </view>
        </view>
			</uni-collapse-item>
      <!-- <uni-collapse-item title="泄水建筑物">
				<view class="content"></view>
			</uni-collapse-item>
      <uni-collapse-item title="放水建筑物">
				<view class="content"></view>
			</uni-collapse-item>
      <uni-collapse-item title="金属结构与电气设备">
				<view class="content"></view>
			</uni-collapse-item>
      <uni-collapse-item title="道路与电力通信条件">
				<view class="content"></view>
			</uni-collapse-item>
      <uni-collapse-item title="其他情况">
				<view class="content"></view>
			</uni-collapse-item> -->
    </uni-collapse>
    <view class="regularBtn">
      <view @click="save" class="regular_btn">
        <view>保存</view>
      </view>
      <view @click="backPage" class="regular_btn">
        <view>返回</view>
      </view>
    </view>
  </view>
</template>

<script>
  import baseURL from '../../utlis/baseURL.js'

  export default {
    data() {
      return {
        time: null,
        waterValue: '',
        placeholderStyle: "color:#ccc;font-size:30rpx",
				styles: {
					color: '#000',
					borderColor: 'transparent',
				},
        weather: '请选择天气',
        weatherArray: ['雪', '雨夹雪', '雨', '阴', '晴'],
        weatherIndex: 0,
        accordionVal: '',
        partinfo: {},
        buildinfo: [],
        normal: [
          { text: '不正常', value: 1 },
          { text: '正常', value: 0 },
        ],
        normalValue: 0,
        imageValue: [],
        imageList: [],
        describeValue: '',
        blockinfo: [],
        drainageinfo: [],
        drawinfo: [],
        metalinfo: [],
        roadinfo: [],
      }
    },
    onLoad(options) {
      if(options) {
        this.getparticulars(options.detailsId)
        this.getbuildings(options.detailsId)
      }
    },
    methods: {
      // 获取详情信息
      getparticulars(id) {
        this.$request.getparticulars({ partId: id }).then(res => {
          let temp = res.data || {}
          this.partinfo = temp
          this.waterValue = this.partinfo.reservoirWaterLevel
          if(this.partinfo.weatherConditions) {
            this.weather = this.weatherArray.find(item => item == this.partinfo.weatherConditions)
            this.weatherIndex = this.weatherArray.findIndex(item => item == this.partinfo.weatherConditions) + 1
          }
        })
      },
      // 获取巡查详情巡查项状态
      getbuildings(id) {
        let blockinfo = [
          { title: '挡水建筑物', list: [] },
          { title: '泄水建筑物', list: [] },
          { title: '放水建筑物', list: [] },
          { title: '金属结构与电气设备', list: [] },
          { title: '道路与电力通信条件', list: [] },
          { title: '其他情况', list: [] },
        ]
        this.$request.getbuildings({ partId: id }).then(res => {
          let list = res.data || []
          list.forEach(item => {
            if(item.buildingsType == '挡水建筑物') {
              // this.blockinfo.push(item)
              blockinfo[0].list.push(item)
            } else if(item.buildingsType == '泄水建筑物') {
              blockinfo[1].list.push(item)
            } else if(item.buildingsType == '放水建筑物') {
              blockinfo[2].list.push(item)
            } else if(item.buildingsType == '金属结构与电气设备') {
              blockinfo[3].list.push(item)
            } else if(item.buildingsType == '道路与电力通信条件') {
              blockinfo[4].list.push(item)
            } else if(item.buildingsType == '其他情况') {
              blockinfo[5].list.push(item)
            }
            if(item.photoVideoUrl) {
              item.photoUrl = []
              item.photoVideoUrl.split(',').forEach(v => {
                item.photoUrl.push({
                  url: v,
                  extname: v.split('.').pop(),
                  name: v
                })
              })
            }
          })
          this.blockinfo = JSON.parse(JSON.stringify(blockinfo));
        })
      },
      // 切换天气
      bindPickerChange(e) {
        this.weather = this.weatherArray[e.detail.value]
        this.weatherIndex = 1
      },
      // 建筑物
      collapseChange(e) {
        // console.log('file: detail.vue:79 ~ e:', e)
      },
      // 保存
      save() {
        if(!this.waterValue) {
          uni.showToast({
            title: '请填写水位信息',
            icon: 'none',
            duration: 2000
          });
          return
        }
        if(this.weather == '请选择天气') {
          uni.showToast({
            title: '请选择天气信息',
            icon: 'none',
            duration: 2000
          });
          return
        }

        this.blockinfo.forEach(v => {
          v.list.forEach(c => {
            if(c.whetherStatus == '0' | c.whetherStatus == '1') {
              c.patrolStatus = '巡查完成'
            }
            setTimeout(() => {
              this.$request.updatebuildings(c).then(res => {
                if(res.code == 200) {
                  // uni.showToast({
                  //   title: '详情信息更新成功！',
                  //   icon: 'success',
                  //   duration: 2000
                  // });
                }
              })
            }, 0);
          })
        })

        let tempdata = {
          uuid: this.partinfo.uuid,
          reservoirWaterLevel: this.waterValue,
          weatherConditions: this.weather,
        }
        this.$request.updateparticulars(tempdata).then(res => {
          if(res.code == 200) {
            uni.showToast({
              title: '详情信息更新成功！',
              icon: 'success',
              duration: 1000
            });
          }
        })

        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
        }, 2000);
      },
      // 返回
      backPage() {
        uni.navigateBack({ delta: 1 })
      },
      // 选择图片
      async select(e, item) {
        const token = uni.getStorageSync("token")
        let urlist;
        e.tempFiles.forEach(v => {
          let data = {
            name: v.name,
            image: v.file,
            imagepath: v.url,
            uid: v.uuid,
          }
          uni.uploadFile({
            url: baseURL + '/file/upload',
            method: 'POST',
            file: data.image,
            filePath: data.imagepath,
            header: {
              "Authorization": token,
            },
            name: "file",
            success: (res) => {
              let nowres = JSON.parse(res.data)
              this.imageList.push({ image: nowres.data.url, blob: v.url })
              urlist = this.imageList.map(v => v.image).join(',')
              item.photoVideoUrl = urlist
            },
            fail: (err) => {
              uni.showToast({
                title: "上传图片失败",
                icon: "none",
                duration: 2000
              });
            },
            complete: (res) => {
              uni.hideLoading()
            }
          });
        })

        this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
      },
      // 删除图片
      deleteimage(e, item) {
        var templist = []
				this.imageList.forEach(v => {
				  if(e.tempFilePath != v.blob){
						templist.push(v)
						return;
				  }
				})
				this.imageList = templist
        let urlist = this.imageList.map(v => v.image).join(',')
        item.photoVideoUrl = urlist
      },
    },
  }
</script>

<style lang="scss" scoped>
  .regular {
    padding: 15rpx 70rpx 15rpx 90rpx;

    .regular_list {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      line-height: 32rpx;
      padding: 20rpx 0;

      .regular_list_type {
        padding: 0 40rpx 0 20rpx;
        color: #ff435e;
      }

      .regular_list_info {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .regular_list_infobox {
          display: flex;
          align-items: center;
        }

        .uni-easyinput {
          width: 260rpx;

          ::v-deep .uni-easyinput__content-input {
            height: 32rpx;
            line-height: 32rpx;
            padding-left: 0 !important;
          }
        }

        uni-picker {
          ::v-deep .gray {
            color: gray;
          }
        }
      }
    }
  }

  .uni-collapse {
    // max-height: 70vh;
    // overflow-y: auto;

    ::-webkit-scrollbar {
      display: none;
    }
  }

  .content {
    padding: 20rpx 50rpx;
    // background-color: #F6FAFF;
    border-top: 1px solid #ebeef5;

    .collapse_top {
      font-size: 28rpx;
      line-height: 35rpx;
    }

    .collapse_mid {
      font-size: 28rpx;
      color: #969696;
      padding: 20rpx 0;
      text-align: center;

      .uni-data-checklist {
        ::v-deep .checklist-group {
          justify-content: space-evenly;
        }
      }
    }

    .collapse_bot {
      .divider {
        display: flex;
        align-items: baseline;

        .line {
          flex: 1;
          // height: 2rpx;
          // background-color: #aeaeae;
          border: 2rpx dashed #aeaeae;
        }

        .text {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #aeaeae;
          margin: 0 20rpx;
        }
      }

      .uni-easyinput {
        ::v-deep .uni-easyinput__content {
          // background-color: #F6FAFF !important;
        }
      }
    }

    .collapse_img {
      
    }
  }

  .regularBtn {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 65rpx;

    .regular_btn {
      width: 45%;
      font-size: 30rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 30rpx;
      color: #fff;
      background-color: #458efb;
      padding: 20rpx 0;

      &:nth-child(1) {
        background-color: #ff9547;
      }
    }
  }
</style>
